<template>
  <n-card title="我的订单" style="margin-bottom: 16px">
    <n-tabs type="line" animated>
      <n-tab-pane name="myCource" tab="全部">
        <!-- 用户的激活码情况 -->
        <wp-data-table
          class="chapter-con"
          :pages="pageResultInfo.pages"
          :total="pageResultInfo.total"
          v-loading="loading"
          :data="data"
          :checked-row-keys="checkedRowKeys"
          :columns="columns"
          @page-change="handlePageChange"
          @select-change="handleSelectChange"
        >
        </wp-data-table>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup lang="ts">
import { useMessage, NButton, useDialog } from 'naive-ui'
import type { DataTableColumn, DataTableColumns } from 'naive-ui'
import useUserStore from '@/stores/modules/user'
import { getUserActiveExamByPage } from '@/api/userActiveExam'
import type {
  UserActiveExamReq,
  UserActiveExamRowData
} from '@/types/userActiveExam'
import { load } from '@/utils/loading'
import { renderSort } from '@/utils/commonBusiness'
import { formatTime } from '@/utils/index'
import WpDataTable from '@/components/WpDataTable/index.vue'
import { use } from 'echarts/core'
const data = ref<UserActiveExamRowData[]>([])
const pageInfo = reactive({
  page: 1,
  pageSize: 50
})

const queryInfo = reactive({
  userId: '',
  examId: ''
})
const loading = ref(false)

const pageResultInfo = reactive({
  pages: 0,
  total: 0
})

const createColumns = (): DataTableColumns<UserActiveExamRowData> => {
  const staticColumns: DataTableColumns<UserActiveExamRowData> = [
    {
      title: '用户名称',
      key: 'userId',
      minWidth: 120,
      width: 120,
      render: (row) => {
        return renderSort(() => `${row.User.username}`)
      }
    },
    {
      title: '科目名称',
      key: 'examId',
      minWidth: 120,
      width: 120,
      render: (row) => {
        return row.Exam ? row.Exam.name : '无'
      }
    },
    {
      title: '所用激活码',
      key: 'activeCode',
      minWidth: 120,
      width: 120
    },
    {
      title: '激活时间',
      key: 'createTime',
      minWidth: 120,
      width: 120,
      render: (row) => {
        return formatTime(row.createTime)
      }
    }
  ]
  return staticColumns
}

const checkedRowKeys = ref<string[]>([])

const columns = createColumns()

// 获取用户激活科目列表
const loadUserActiveExams = async () => {
  loading.value = true

  if (!useUserStore().userInfo?.id) {
    await useUserStore().getUserInfo()
  }
  let param: UserActiveExamReq = {
    ...pageInfo,
    userId: useUserStore().userInfo?.id
  }

  getUserActiveExamByPage(param)
    .then((res) => {
      console.log(res)
      data.value = res.data.items
      pageResultInfo.pages = res.data.pages
      pageResultInfo.total = res.data.total
    })
    .catch(console.error)
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  loadUserActiveExams()
})

const handlePageChange = (page?: number, pageSize?: number) => {
  page && (pageInfo.page = page)
  pageSize && (pageInfo.pageSize = pageSize)
  loadUserActiveExams()
}

const handleSelectChange = (rows: string[]) => {
  checkedRowKeys.value = rows.map((item) => item)
}
</script>

<style scoped lang="scss">
.chapter-con {
  font-size: 13px;

  :deep(.n-data-table-tbody .n-data-table-tr:hover .n-data-table-td) {
    background-color: #e5f3ff;

    .move {
      opacity: 0.85;
    }
  }

  :deep(.my-handle) {
    height: 28px;
    line-height: 28px;
    // height: calc(100% + 16px);
    position: relative;
    .move {
      transition: all 0.3s var(--n-bezier);
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #d1ecfa;
      color: $primaryColor;
      position: absolute !important;
      left: -8px;
      top: -8px;
      bottom: -8px;
      width: 40px;
      // right: 0;
      cursor: move;
    }
  }
}
</style>
